<template>
    <div class="top flex-between">
        <div class="flex-start">
            <img src="@/assets/image/home/left.png" class="ileft" alt="">
            <div style="margin-left: 20px;">
                <div class="toptitle">水电监控管理平台</div>
                <div class="topsecond">Water and Electricity Monitoring Management Platform</div>
            </div>
        </div>
        <div class="rightbox flex-between">
            <img src="@/assets/image/home/righticon.png" class="iconj" alt=""></img>
            <el-select v-model="campusId" placeholder="校区" style="width: 240px" @change="campusChange">
                <el-option v-for="(item, index) in data.campusList" :key="index" :label="item.campusName"
                    :value="item.campusId" />
            </el-select>
            <el-select v-model="dormitoryId" clearable placeholder="楼栋" style="width: 240px" @change="dormitoryChange"
                @clear="clear">
                <el-option v-for="(item, index) in data.dormitoryList" :key="index" :label="item.label"
                    :value="item.dormitoryId" />
            </el-select>
            <img src="@/assets/image/home/lefticon.png" class="iconj" alt="">
        </div>
    </div>
    <img src="@/assets/image/home/line.png" class="line" alt="">
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useScreenStore } from '../store/index.js'
const screenStore = useScreenStore()
const { proxy } = getCurrentInstance()
let campusId = ref(null)
let dormitoryId = ref(null)
const data = reactive({
    campusList: [],
    dormitoryList: []
})

let campusList = async () => {
    let res = await proxy.$https.campusList()
    console.log('campusList', res);
    data.campusList = res.data
    data.campusList.forEach((item) => {
        item.campusId = item.id
    })
    campusId.value = data.campusList[1].id
    screenStore.setCampusId(data.campusList[1].id)
    dormitoryList()
}

let dormitoryList = async () => {
    let res = await proxy.$https.dormitoryList({
        campusId: campusId.value
    })
    console.log('dormitoryList', res);
    data.dormitoryList = res.data
    data.dormitoryList.forEach((item) => {
        item.dormitoryId = item.id
    })
}

let campusChange = (id) => {
    campusId.value = id
    screenStore.setCampusId(id)
    dormitoryList()
    //清空楼栋
    dormitoryId.value = null
    screenStore.clearDormitoryId()
    setTimeout(() => {
        countDeviceNum()
    }, 500)
}

let clear = () => {
    dormitoryId.value = null
    screenStore.clearDormitoryId()
    setTimeout(() => {
        countDeviceNum()
    }, 500)
}

let dormitoryChange = (id) => {
    dormitoryId.value = id
    screenStore.setDormitoryId(id)
    setTimeout(() => {
        countDeviceNum()
    }, 500)
}

let countDeviceNum = async () => {
    let res = await proxy.$https.countDeviceNum({
        campusId: screenStore.campusId,
        dormitoryId: screenStore.dormitoryId
    })
    console.log('countDeviceNum', res);
    screenStore.setTotalMessage(res.data)
}

onMounted(() => {
    campusList()
})

</script>

<style lang='less' scoped>
.top {
    margin-top: 11px;
    width: 1920px;
    height: 86px;
    background-image: url('@/assets/image/home/topbg.png');
    background-repeat: no-repeat;
    background-size: 1920px 86px;
    background-blend-mode: multiply;
    background-color: rgba(17, 23, 29, .4);

    .ileft {
        width: 33.5px;
        height: 86px;
    }

    .toptitle {
        color: #FFF;
        font-size: 42px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 4.62px;
    }

    .topsecond {
        color: #F3F9FF;
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: uppercase;
    }

    .rightbox {
        margin-right: 30px;
        width: 705px;

        .iconj {
            width: 50px;
            height: 34.5px;
            animation: opacityChange 1.5s infinite;
        }

        @keyframes opacityChange {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }

            100% {
                opacity: 1;
            }
        }

        :deep(.el-select__wrapper) {
            color: #fff;
            border-radius: 69px;
            border: 1px solid #4ED0FF;
            padding: 13px 35px;
            border-radius: 69px;
            background: linear-gradient(180deg, rgba(80, 182, 255, 0.14) 0%, rgba(48, 109, 153, 0.01) 100%);
            font-size: 20px;
        }

        :deep(.el-select__placeholder) {
            color: #FFF;
        }

        :deep(.el-select__suffix) {
            color: #4ECFFE;
        }

    }
}

.line {
    width: 1920px;
}
</style>